<template>
    <div>
        <h2>{{msg}}</h2>
        <h2>{{msg.split{''}.reverse().join('') }}</h2>
        <h2>{{reMsgf() }}</h2>
        <h2>{{reMsgf() }}</h2>
        <h2>{{reMsgf() }}</h2>
        <h2>{{ reMsg }}</h2>
        <h2>{{ reMsg }}</h2>
        <h2>{{ reMsg }}</h2>
    </div>
</template>


<script>
import{ref,computed } from "vue"
export default{
    setup(){
        const msg = ref("Hello Vue");
        console.log(msg)

        function reMsgf(){
            console.log("触发reMsgf")
            return msg.value.split('').reverse().join('');
        }
         const reMsg=computed(() =>{
            console.log("触发reMsg")
            return msg.value.split('').reverse().join('');
         })

         watch(msg,(newValue,oldValue)=>{
            console.log("旧值是"+oldValue+",新值是"+newValue)
         })

        return{
            msg,
            reMsgf,
            reMsg,
        }
    }
}
</script>

<style></style>